<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/reset.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
    <!-- 头部 -->
    <div class="header-wrap">
        <div class="header w">
            <h1 class="logo fl">
                <img src="./images/logo.png" alt="" />
            </h1>
            <ul class="header-nav fr">
                <li>
                    <a href="#">HOME</a>
                </li>
                <li>
                    <a href="#">ABOUT</a>
                </li>
                <li>
                    <a href="#">PROTFOLIO</a>
                </li>
                <li>
                    <a href="#">SERVICE</a>
                </li>
                <li>
                    <a href="#">NEWS</a>
                </li>
                <li>
                    <a href="#">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- banner -->
    <div class="banner">
        <img src="./images/banner.jpg" alt="" />
        <ul class="img-nav">
            <li><a href="#"></a></li>
            <li><a href="#" class="on"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>

    <!-- content -->
    <div class="content">
        <!-- content1 -->
        <div class="content1">
            <div class="w">
                <h2 class="title-h2">服务范围</h2>
                <h3 class="title-h3">our services</h3>
                <div class="con1-box fl">
                    <img src="./images/img1.png" alt="">
                    <p class="box-name">
                        1.WEB DESIGN
                    </p>
                    <p class="box-intro">
                        企业品牌网站设计/手机网站制作
                        动画网站创意设计
                    </p>
                </div>
                <div class="con1-box fl">
                    <img src="./images/img2.png" alt="">
                    <p class="box-name">
                        2.GRAPHIC DESIGN
                    </p>
                    <p class="box-intro">
                        标志LOGO设计/产品宣传册设计
                        企业广告/海报设计
                    </p>
                </div>
                <div class="con1-box fl">
                    <img src="./images/img3.png" alt="">
                    <p class="box-name">
                        3.E-BUSINESS PLAN
                    </p>
                    <p class="box-intro">
                        淘宝/天猫装修设计及运营推广
                        企业微博、微信营销
                    </p>
                </div>
                <div class="con1-box fl">
                    <img src="./images/img4.png" alt="">
                    <p class="box-name">
                        4.MAILBOXAGENTS
                    </p>
                    <p class="box-intro">
                        腾讯/网易企业邮箱品牌代理
                        个性化邮箱定制开发
                    </p>
                </div>
            </div>

        </div>

        <!-- content2 -->
        <div class="content2">
            <div class="w">
                <h2 class="title-h2">{ 客户案例 } </h2>
                <h3 class="title-h3">With the best professional technology, to design the best innovative web site</h3>
                <div class="con2-box clearfix">
                    <img src="./images/client1.jpg" alt="">
                    <img class="mar" src="./images/client2.jpg" alt="">
                    <img src="./images/client3.jpg" alt="">
                </div>
                <p class="view">
                    VIEW MORE
                </p>
            </div>
        </div>

        <!-- content3 -->
        <div class="content3">
            <div class="w clearfix">
                <h2 class="title-h2">最新资讯</h2>
                <h3 class="title-h3">TEH LATEST NEWS</h3>
                <img class="fl" src="./images/home.jpg" alt="">
                <div class="date fl">
                    <span class="day">
                        09
                    </span>
                    <span class="month">
                        Jan
                    </span>
                </div>
                <div class="tip fl">
                    <p class="tip-titl">
                        网站排名进入前三的技巧说明
                    </p>
                    <p class="tip-intro">
                        很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                        首页，更不用说进首页前三了。那么网站优...
                    </p>
                </div>

                <div class="date fl">
                    <span class="day">
                        08
                    </span>
                    <span class="month">
                        Jan
                    </span>
                </div>
                <div class="tip fl">
                    <p class="tip-titl">
                        flash网站制作的优缺点
                    </p>
                    <p class="tip-intro">
                        虽然HTML5程序语言出现，大有逐渐代替Flash网站制作的意味，但是过于生硬的HTML5动画效果，始终...
                    </p>
                </div>

                <div class="date fl">
                    <span class="day">
                        07
                    </span>
                    <span class="month">
                        Jan
                    </span>
                </div>
                <div class="tip fl">
                    <p class="tip-titl">
                        做个网站多少钱？
                    </p>
                    <p class="tip-intro">
                        “做个网站多少钱？”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱，你是要...
                    </p>
                </div>

                <div class="date fl">
                    <span class="day">
                        06
                    </span>
                    <span class="month">
                        Jan
                    </span>
                </div>
                <div class="tip fl">
                    <p class="tip-titl">
                        哪些网站优化手法属于网站过度优化
                    </p>
                    <p class="tip-intro">
                        大部分人都想让自己的网站，一夜之间出现在搜索引擎首页，独占鳌头。但是事实告诉我们罗马不是一...
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- footer-->
    <div class="footer">
        <div class="w clearfix">
            <p class="footer-left fl">
                Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved
            </p>
            <ul class="footer-right clearfix fr">
                <li>
                    <a href="#">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#">
                        About
                    </a>
                </li>
                <li>
                    <a href="#">
                        Portfolio
                    </a>
                </li>
                <li>
                    <a href="#">
                        Contact
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>